<template>
  <div class="about">
<el-container>
  <el-header>
    <span style="position: absolute;top: -20px;padding-top: 20px;right: 50%;font-size: 40px;font-weight: bold" >信息系统</span>
     <span style="position: absolute;right: 0%;font-size: 40px">
        <router-link to="/"><el-button type="danger" >退出登入</el-button></router-link>
      </span>
  </el-header>
  <el-main>
    <span>
        <router-link to="/Mine/news"><el-button type="primary" icon="el-icon-reading">折扣信息</el-button></router-link>
      </span>
      <span>
        <router-link to="/Mine/MyAddress"><el-button type="primary" icon="el-icon-map-location">Address</el-button></router-link>
      </span>
      <span>
        <router-link to="/Mine/manageUsers"><el-button type="primary" icon="el-icon-user">用户管理</el-button></router-link>
      </span>
      <span>
        <router-link to="/Mine/mybook"><el-button type="primary" icon="el-icon-reading">书籍信息</el-button></router-link>
      </span>
      <span>
        <router-link to="/Mine/book"><el-button type="primary" icon="el-icon-notebook-2"></el-button></router-link>
      </span>
  </el-main>
</el-container>
<a href="#nowhere" style="color:#222;float: right;padding: 1px;font-size: 18px">联系我们</a>
    <router-view></router-view>
  </div>
  
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'mine',
  data:function(){
    return {}
  },
  computed: {
    ...mapState('account' , ['roles']),
  }
}
</script>

<style scoped>
  .el-header{
    background-color: #43474b;
    color: rgb(213, 242, 247);
    text-align: center;
    line-height: 50px;
  }
 </style>